<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>juicer.js模板引擎的使用</title>
        <script src="js/juicer-min.js"></script>
    </head>
    <body>
        <h1>juicer.js模板引擎的使用</h1>
        <div id="content"></div>
        <script src="//cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var json = {
                links: [
                    {href: 'http://juicer.name', alt: 'Juicer'},
                    {href: 'http://benben.cc', alt: 'Benben'},
                    {href: 'http://ued.taobao.com', alt: 'Taobao UED'}
                ]
            };

            var tpl = [
                '{@each links as item}',
                    '$${item|links_build} <br />',
                '{@/each}'
            ].join('');

            var links = function(data) {
                return '<a href="' + data.href + '" alt="' + data.alt + '">' + data.alt + '</a>';
            };

            juicer.register('links_build', links); //注册自定义函数
            var html = juicer(tpl,json);
            console.log('html',html);
            $("#content").html(html);
        </script>
    </body>
</html>